<template>
  <div class="payment">
    <div class="payment-top">
      <div class="payment-top-box">
        <div class="top-title flex-box">
          <div class="left flex-box" @click="routeBack()">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gb-xiazai6"></use>
            </svg>
          </div>
          <h3>订单配送至</h3>
        </div>
        <div class="top-main">
          <div class="lists-sure flex-box" @click="toAdressLists">
            <div class="left">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gb-weizhi"></use>
              </svg>
            </div>
            <div class="center">
              <h4>收货人： 陈正雄 &nbsp;&nbsp;&nbsp;&nbsp; 130****2520<span>默认</span></h4>
              <p>邮箱：<span>chenzhengxiong@genomics.cn</span></p>
              <p>收货地址：<span>广东省 深圳市 坪山区 东城上邸 1B1304</span></p>
            </div>
            <div class="right">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gb-jiantou"></use>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="payment-lists">
      <dl v-for="(item,index) in delProLists('cartSelected')" :key="index">
        <dt class="flex-box">
          <div class="name"><p>{{item.name==='无促销'?'商品清单':item.name}}</p></div>
          <div class="count">
            <p>小计: <span>￥</span><i>{{((item.total*100-item.reduce*100)/100).toFixed(2)}}</i></p>
          </div>
        </dt>
        <dd v-for="(items,indexs) in item.details" :key="indexs">
          <div class="flex-box list-main">
            <div class="left">
              <div class="img-box">
                <img :src="$BASEPATH + items.img">
              </div>
              <h3>{{items.name}}</h3>
            </div>
            <div class="right">
              <h3><span>￥</span>{{items.price}}</h3>
              <div class="pro-num" v-if="items.amountFlag==='1'">
                <button class="left flex-box" :disabled="items.amount<=1" @click="proMinus(items)">
                  <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-gb-jian"></use>
                </svg></button>
                <div class="center flex-box">{{items.amount}}</div>
                <button class="right flex-box" @click="proAdd(items)"><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-gb-jia"></use>
                </svg></button>
              </div>
              <p v-else>× {{items.amount}}</p>
            </div>
          </div>
          <div class="cuxiao-select flex-box" v-if="items.ecCoupons">
            <p class="select-title" :class="{active:items.couponId!=='0'}">促销</p>
            <p class="more-msg iconfont-gb" @click="showCuXiaoBox(items)">{{items | capitalize}}</p>
          </div>
        </dd>
      </dl>
      <dl class="payment-count">
        <dd class="flex-box"><p>运费</p><p>快递包邮</p></dd>
        <dd class="flex-box"><p>优惠券</p><p class="more-msg iconfont-gb" @click="showQuan">不使用优惠券</p></dd>
        <dd class="flex-box"><p>积分</p><p class="more-msg iconfont-gb" @click="showJiFen">1366.6积分可用</p></dd>
        <dd class="flex-box"><p>其它优惠</p><p>无</p></dd>
        <dd class="flex-box"><p>备注：</p><input class="beizhu" type="text" placeholder="输入您的留言以便我们更好的服务"></dd>
      </dl>
    </div>
    <div class="payment-footer">
      <div class="payment-left flex-box">
        <p>共{{selectedCartNum}}件，结算金额<i>￥</i><span>{{cartsMoneyDeal}}</span></p>
      </div>
      <div class="payment-right flex-box">
        <p>提交订单</p>
      </div>
    </div>
    <mallProMsg :proQuan = true v-show="proQuanShow"></mallProMsg>
    <mallProMsg :proJiFen = true v-show="proJiFenShow"></mallProMsg>
    <transition mode="out-in"
      name="slide-right"
      :enter-active-class="'slide-active'"
      :leave-active-class="'slide-active'">
      <cuXiaoBox v-show="showCuXiao" :isPayment="true" :showCuXiao="showCuXiao" :cuxiaoData = "cuxiaoData"></cuXiaoBox>
    </transition>
  </div>
</template>

<script>
import cuXiaoBox from '@/components/Cart/CuXiao.vue'
import { mapGetters, mapActions, mapState } from 'vuex'
import mallProMsg from '@/components/mall_promsg.vue'
// @ is an alias to /src
export default {
  name: 'mallIndex',
  data() {
    return {
      lists: '',
      proChuXiaoShow: false,
      proQuanShow: false,
      proJiFenShow: false,
      cuxiaoData: '',
      showCuXiao: false
    }
  },
  components: {
    mallProMsg,
    cuXiaoBox
  },
  computed: {
    ...mapState({
      paymentLists: state => state.cart.cartSelected
    }),
    ...mapGetters({
      selectedCartNum: 'cart/selectedCartNum',
      cartsMoney: 'cart/cartsMoney',
      delProLists: 'cart/delProLists'
    }),
    cartsMoneyDeal: function() {
      let money = 0
      if (this.$route.query.goodsInfo) {
        let goods = JSON.parse(this.$route.query.goodsInfo)
        money = Number(goods.price) * goods.amount
      } else {
        money = ((this.cartsMoney * 100 - this.reduceAll * 100) / 100).toFixed(2)
      }
      return money
    },
    reduceAll: function() {
      let re = 0
      this.delProLists('cartSelected').forEach(item => {
        re += Number(item.reduce) * 100
      })
      return (re / 100).toFixed(2)
    }
  },
  filters: {
    capitalize: function(value) {
      if (!value.ecCoupons) return ''
      let name = '不使用促销'
      value.ecCoupons.forEach(item => {
        if (item.id === value.couponId) {
          name = item.name
        }
      })
      return name
    }
  },
  methods: {
    ...mapActions({
      reduceGoodsFromCart: 'cart/reduce_goods_from_cart',
      reduceGoodsFromSelected: 'cart/reduce_goods_from_selected',
      addGoodsFromCart: 'cart/add_goods_from_cart',
      addGoodsFromSelected: 'cart/add_goods_from_selected',
      updateGoodsCouponid: 'cart/update_goods_couponid'
    }),
    proAdd(goods) {
      this.addGoodsFromCart(goods)
      this.addGoodsFromSelected(goods)
    },
    proMinus(goods) {
      this.reduceGoodsFromCart(goods)
      this.reduceGoodsFromSelected(goods)
    },
    showCuXiaoBox(data) {
      this.cuxiaoData = data
      setTimeout(() => {
        this.showCuXiao = true
      }, 10)
    },
    showQuan() {
      this.proQuanShow = true
    },
    showJiFen() {
      this.proJiFenShow = true
    },
    routeBack() {
      this.$router.go(-1)
    },
    toAdressLists() {
      this.$router.push('/adressLists')
    },
    toAdressSet() {
      this.$router.push('/adressSet')
    }
  },
  beforeRouteLeave(to, from, next) {
    if (!this.proChuXiaoShow && !this.proQuanShow && !this.proJiFenShow) {
      next()
    } else {
      this.proChuXiaoShow = false
      this.proQuanShow = false
      this.proJiFenShow = false
      next(false)
    }
  },
  created() {
    this.$bus.$on('closeProMsg', data => {
      this.proChuXiaoShow = data
      this.proQuanShow = data
      this.proJiFenShow = data
    })
    this.$bus.$on('closeChuXiao', data => {
      this.showCuXiao = data
    })
    this.$bus.$on('selectPaymentId', goods => {
      console.log(goods)
      this.updateGoodsCouponid(goods)
      this.showCuXiao = false
    })
    // console.log(this.$route.query)
    // console.log(this.paymentLists)
    // if (this.$route.query.goodsInfo) {
    //   let goods = JSON.parse(this.$route.query.goodsInfo)
    //   this.paymentListsDeal = { [goods.allbusinessId]: goods }
    //   this.cartsMoneyDeal = Number(goods.price) * goods.amount
    // } else {
    //   this.paymentListsDeal = this.paymentLists
    //   this.cartsMoneyDeal = ((this.cartsMoney * 100 - this.reduceAll * 100) / 100).toFixed(2)
    // }
    // console.log(this.paymentListsDeal)
  },
  mounted() {
    console.log(this.delProLists('cartSelected'))
  }
}
</script>
<style scoped>
@import 'https://at.alicdn.com/t/font_738716_8wvleiq1n5a.css';
</style>

<style scoped lang="scss">
.payment {
  width: 100%;
  .payment-top {
    height: 140px;
    position: relative;
    background: -webkit-linear-gradient(#0056b6, #009ce1);
    background: linear-gradient(#0056b6, #009ce1);
    .payment-top-box {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: url('../assets/img/payment-banner.png') left bottom no-repeat;
      background-size: 10.4%;
    }
    .top-title {
      width: 100%;
      height: 28%;
      top: 0;
      position: absolute;
      color: #fff;
      font-size: 16px;
      .left {
        width: 30px;
        height: 100%;
        font-size: 14px;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    .top-main {
      width: 100%;
      height: 72%;
      position: absolute;
      bottom: 0;
      left: 0;
      padding-bottom: 10px;
      box-sizing: border-box;
      .lists-none,
      .lists-sure {
        height: 100%;
      }
      svg {
        color: #fff;
      }
      .left {
        width: 12%;
        font-size: 24px;
      }
      .center {
        width: 80%;
        text-align: left;
        color: #fff;
        h5 {
          font-size: 18px;
          padding: 8px 6px;
          border-radius: 3px;
        }
        h4 {
          font-size: 16px;
          margin-bottom: 8px;
          span {
            font-size: 10px;
            display: inline-block;
            border-radius: 10px;
            border: 1px solid rgba($color: #fff, $alpha: 0.5);
            padding: 3px 8px 1px 8px;
            margin-left: 8px;
            position: relative;
            top: -2px;
          }
        }
        p {
          font-size: 12px;
          margin-bottom: 2px;
          line-height: 18px;
          span {
            opacity: 0.6;
          }
        }
      }
      .right {
        width: 8%;
        font-size: 20px;
        opacity: 0.6;
      }
    }
  }
  .payment-lists {
    width: 100%;
    bottom: 50px;
    left: 0;
    right: 0;
    top: 130px;
    background: #eee;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: fixed;
    z-index: 6;
    padding: 0 8px;
    padding-top: 10px;
    overflow-y: auto;
    background: #eee;
    box-sizing: border-box;
    dl {
      width: 100%;
      display: block;
      overflow: hidden;
      box-sizing: border-box;
      margin-bottom: 8px;
      border-radius: 8px;
      padding: 4px 8px 8px 8px;
      background: #fff;
      box-shadow: 0 0 12px rgba($color: #000000, $alpha: 0.07);
      &:last-child {
        border-bottom: none;
      }
      dt {
        justify-content: space-between;
        padding: 16px 0 8px 0;
        width: 100%;
        box-sizing: border-box;
        .name {
          font-size: 14px;
          font-weight: bold;
        }
        .count {
          font-size: 12px;
          span {
            color: #f00;
          }
          i {
            color: #f00;
          }
        }
      }
      dd {
        width: 100%;
        float: left;
        padding: 12px 0;
        font-size: 14px;
        position: relative;
        background: #fff;
        box-sizing: border-box;
        &:last-child {
          padding-bottom: 10px;
        }
        .beizhu {
          font-size: 14px;
          color: #f00;
        }
        input::-webkit-input-placeholder {
          font-size: 14px;
        }
        .more-msg {
          color: #999;
          padding-right: 18px;
          position: relative;
          &::after {
            content: '\e616';
            position: absolute;
            top: 0;
            right: 0;
            width: 1em;
            height: 1em;
            font-size: 16px;
            vertical-align: -0.15em;
            top: -1px;
            fill: currentColor;
            overflow: hidden;
          }
        }
        &::after {
          width: 100%;
          border-bottom: 1px dashed #eee;
          display: block;
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
        }
        &:last-child {
          &::after {
            display: none;
          }
        }
        p {
          font-size: 14px;
          color: #333;
        }
        input {
          border: none;
          outline: none;
          background: none;
          width: 290px;
        }
        .list-main {
          justify-content: space-between;
          h3 {
            font-size: 14px;
            line-height: 18px;
            color: #333;
            margin-top: 0;
            span {
              font-size: 10px;
            }
          }
          .left {
            text-align: left;
            width: 260px;
            .img-box {
              width: 50px;
              height: 50px;
              float: left;
              border-radius: 3px;
              overflow: hidden;
              margin-right: 12px;
              position: relative;
              &::before {
                width: 100px;
                height: 100px;
                border-radius: 6px;
                position: absolute;
                left: 0;
                content: '';
                display: block;
                top: 0;
                border: 1px solid #eee;
                transform: scale(0.49);
                transform-origin: top left;
              }
              img {
                width: 100%;
                border-radius: 3px;
              }
            }
          }
          .right {
            height: 50px;
            text-align: right;
            position: relative;
            .pro-num {
              width: 168px;
              height: 48px;
              border-radius: 3px;
              position: absolute;
              top: -4px;
              right: -6px;
              transform: scale(0.4);
              transform-origin: bottom right;
              button {
                float: left;
                width: 56px;
                height: 100%;
                border: none;
                background: #fff;
                color: #666;
                box-sizing: border-box;
                &:disabled {
                  color: #ccc;
                }
                svg {
                  font-size: 24px;
                }
                &.active {
                  color: #ccc;
                }
              }
              & > div {
                float: left;
                width: 54px;
                height: 100%;
                line-height: 24px;
                box-sizing: border-box;
                font-size: 28px;
                color: #666;
                border-radius: 8px;
                border: 1px solid #ddd;
                &.center {
                  font-size: 32px;
                }
              }
            }
            p {
              color: #666;
              margin-top: 4px;
            }
          }
        }
        .cuxiao-select {
          justify-content: space-between;
          margin-top: 10px;
          .select-title {
            display: inline-block;
            background: #ccc;
            color: #fff;
            font-size: 12px;
            line-height: 16px;
            padding: 0 4px;
            border-radius: 3px;
            &.active {
              background: #fe9402;
            }
          }
        }
        &.list-foot {
          justify-content: flex-end;
          padding: 18px 0;
          p {
            font-size: 16px;
            color: #333;
            i {
              color: #f00;
            }
            span {
              color: #f00;
              font-size: 12px;
              position: relative;
              top: -2px;
            }
          }
        }
      }
    }
    .payment-count {
      padding-top: 8px;
      padding-bottom: 8px;
      dd {
        height: 44px;
        justify-content: space-between;
        border-radius: 0;
        &:first-child {
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
        }
        &:last-child {
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
        }
      }
    }
  }
  .payment-footer {
    width: 100%;
    height: 50px;
    left: 0;
    bottom: 0;
    background: #fff;
    position: fixed;
    font-size: 16px;
    box-sizing: border-box;
    .payment-left {
      width: 70%;
      height: 100%;
      float: left;
      justify-content: flex-start;
      -webkit-justify-content: flex-start;
      padding: 0 10px 0 15px;
      box-sizing: border-box;
      span,
      i {
        color: #f00;
      }
      i {
        font-size: 12px;
        position: relative;
        top: -3px;
        margin-left: 6px;
      }
    }
    .payment-right {
      width: 30%;
      height: 100%;
      float: left;
      background: #ff003c;
      color: #fff;
      font-size: 18px;
    }
    &::after {
      width: 100%;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      border-top: 1px solid #eee;
      transform: scaleY(0.5);
      transform-origin: top left;
    }
  }
}
.slide-active {
  transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition-property: opacity, transform;
}
.slide-right-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translate3d(30%, 0, 0);
}
</style>
